<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>生命周期</h1>
      <p>count--{{count}}</p>
      <button @click="count++">change</button>
      <button @click="$destroy()">销毁</button>
    </div>
    <script>
      Vue.config.productionTip = false;

      /* 
      销毁阶段:
        * 当Vue实例调用$destroy方法的时候 或者 组件被条件渲染或者路由切换的时候被销毁时 则进入销毁阶段
        * `【!!!!beforeDestroy】`: 实例销毁之前,主要是为了完成一些收尾的工作,比如清除定时器,取消订阅等等
        * `teardown watchers`:实例销毁的时候,取消所有的watcher订阅
        * `teardown child components`: 实例被销毁的时候,取消所有的子组件的实例
        * `teardown eventListeners`: 实例被销毁的时候,取消所有的事件监听器 
        *  `【destroyed】`: 实例销毁之后,一般不使用这个钩子函数
    */
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 0,
          };
        },
        beforeCreate() {
          console.log(".....beforeCreate.....", this, this.count);
          // debugger;
        },
        created() {
          console.log(".....created.....", this, this.count);
          // debugger;
        },

        beforeMount() {
          console.log("-----beforeMount------");
          // debugger;
        },
        mounted() {
          console.log("-----beforeMount------");
          // debugger;
        },
        beforeUpdate() {
          console.log("-----beforeUpdate------", this);
          // debugger;
        },
        updated() {
          console.log("-----updated------");
          // debugger;
        },
        beforeDestroy() {
          console.log("-----beforeDestroy------", this);
          debugger;
        },
        destroyed() {
          console.log("-----destroyed------");
          debugger;
        },
      });
    </script>
  </body>
</html>
